<template>
	<div class="top-right-btn">
		<el-row>
			<el-tooltip v-if="isSearch" :content="showSearch ? '隐藏搜索' : '显示搜索'" effect="dark" placement="top">
				<el-button circle @click="toggleSearch">
					<el-icon>
						<ele-Search />
					</el-icon>
				</el-button>
			</el-tooltip>
			<el-tooltip effect="dark" content="刷新" placement="top">
				<el-button circle @click="refresh">
					<el-icon>
						<ele-Refresh />
					</el-icon>
				</el-button>
			</el-tooltip>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="rightToolbar">

// 定义父组件传过来的值
const props = defineProps({
	// 是否显示搜索区域
	showSearch: {
		type: Boolean,
		default: () => false,
	},
	// 是否显示搜索
	isSearch: {
		type: Boolean,
		default: () => true,
	},
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['update:showSearch', 'queryTable']);

// 显示/隐藏搜索区域
const toggleSearch = () => {
	emit('update:showSearch', !props.showSearch);
};
// 显示/隐藏搜索区域
const refresh = () => {
	emit('queryTable');
};
</script>
